import React, { PureComponent, Fragment } from 'react';
import {Input} from 'antd';
import styles from './index.less'

export default class GrantCondRange extends PureComponent {
  componentWillMount() {
    window.Isoption = false;
  }
  componentDidMount() {
    window.Isoption = true;
  }
    static getDerivedStateFromProps(nextProps) {
        if ('value' in nextProps) {
          return {
            ...(nextProps),
            aa:9999
          };
        }
        return null;
      }

    constructor(props) {
        super(props);
        this.state = {
          range:props.value||[]
        };
    }
  onChange = (type,val) => {
    const { onChange,value } = this.props;
    const { range } = this.state;
     value?value[type]=val.target.value:range[type]=val.target.value;
    this.setState({
        range:value||range
    })
    this.props.onChange(value||range)
  }

  onBlur= (e) => {
    const {onBlur} = this.props;
    if(typeof onBlur === 'function') onBlur(e);
  }

  render() {
    const {
      value, errorData
    } = this.props;
    return (
        <div className={styles["InputNumberRange-container"]}>
            <div>
                <div>
                    累计支付成功
                    <Input
                        style={{width: 126, height: 32, marginLeft: 8, marginRight: 8}}
                        onChange={(val)=>this.onChange(0,val)} value={value?value[0]:undefined}
                        addonAfter="笔"
                    />或
                </div>
                {(errorData.MinTradeLimit || errorData.MaxTradeLimit)&&
                <div className={styles.notice}>
                      请输入{errorData.MinTradeLimit &&errorData.MinTradeLimit}~
                           {errorData.MaxTradeLimit &&errorData.MaxTradeLimit}
                      以内的数值
                </div>}
                <div>
                    累计消费金额
                    <Input
                        style={{width: 126, height: 32, marginLeft: 8, marginRight: 8}}
                        onChange={(val)=>this.onChange(1,val)} value={value?value[1]:undefined}
                        addonAfter="元"
                    />或
                </div>
                {(errorData.MinAmountLimit ||errorData.MaxAmountLimit) &&
                <div className={styles.notice}>
                      请输入{errorData.MinAmountLimit &&errorData.MinAmountLimit}~
                           {errorData.MaxAmountLimit &&errorData.MaxAmountLimit}
                      以内的数值
                </div>}
                <div>
                    累计积分达到
                    <Input
                        style={{width: 126, height: 32, marginLeft: 8}}
                        onChange={(val)=>this.onChange(2,val)} value={value?value[2]:undefined}
                        addonAfter="分"
                    />
                </div>
                {(errorData.MinPointsLimit ||errorData.MaxPointsLimit)&&
                <div className={styles.notice}>
                      请输入{errorData.MinPointsLimit &&errorData.MinPointsLimit}~
                            {errorData.MaxPointsLimit &&errorData.MaxPointsLimit}
                      以内的数值
                </div>}
            </div>
        </div>
    );
  }
}
